<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles/main.css">
    <link rel="shortcut icon" type="image/x-icon" href="./images/favicon.png">
    <title>【北京Java招聘】2020年北京Java最新人才招聘信息-BOSS直聘</title>
</head>

<body>
    <div class="container" id="app">
        <div class="list-header flex">

            <form action="" class="flex">
                <img src="./images/icon-home.png" alt="">
                <div class="inner flex">
                    <input type="text" name="" id="" value="web前端">
                    <span>&times;</span>
                </div>

                <button>搜索</button>
            </form>
        </div>

        <div class="filter flex">
            <dl :class="{active:active==index && show}" v-for="(filter,index) in filters" :key="filter.name">
                <dt @click="open(index)">{{filter.name}}</dt>
                <dd>
                    <ul>
                        <li class="active" v-for="option in filter.options" :key="option.id">{{option.text}}</li>
                    </ul>
                </dd>
            </dl>
        </div>
        <ul class="job-list">
            <li v-for="job in jobs" :key="job.id">
                <a :href="'./detail.html?jId='+job.id" class="job-item flex">
                    <img :src="job.logo" alt="">
                    <div class="text ">
                        <div class="title flex">
                            {{job.title}}
                            <span class="salary">{{job.salary}}</span>
                        </div>
                        <div class="company">
                            {{job.company}}
                        </div>
                        <div class="props">
                            <span v-for="(tag,index) in job.tags" :key="index">{{tag}}</span>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <script type="text/javascript" src="./script/vue/vue.js"></script>
    <script>
        //view model
        const vm = new Vue({
            el: '#app',
            data: {
                filters: [],
                show: false,
                active: 1, //筛选器 默认第一个active
                //
                companies: [],
                jobs: []
            },
            methods: {
                open(id) {
                    const that = this
                    that.active = id
                    that.show = !that.show
                }
            },
            created: function () {
                //axios
                const that = this
                fetch('http://127.0.0.1:5500/Vue-Boss/api/mockData/filters.json').then(function (res) {
                    return res.json()
                }).then((data) => {
                    that.filters = data.filters
                    console.log(data)
                })

                fetch('http://127.0.0.1:5500/Vue-Boss/api/mockData/jobs.json').then(function (res) {
                    return res.json()
                }).then((data) => {
                    that.jobs = data.result
                    console.log(data)
                })
            },
        })
    </script>
</body>

</html>